<template>
  <div class="person">
    <h2>一辆{{car.brand}}车，价值{{ car.price }}元</h2>
    <button @click="changeCar">点击修改车价</button>
    <br/>
    <h2>游戏列表：</h2>
    <ul>
        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">点击修改第一个游戏名字</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import { ref } from 'vue'
   //数据
   let car = ref({brand:'BYD',price:10})//用ref创建响应式对象，创建的对象中value里的值相当于是用reactive
   let games = ref([
    {id:1,name:'LOL'},
    {id:2,name:'DNF'},
    {id:3,name:'DNF2'}   
   ])

   //方法
   function changeCar() {
       car.value.price += 10
   }
   function changeFirstGame() {
       games.value[0].name = 'LOL2'
   }
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


